<template>
  <a-layout class="a-content">
    <div class="a-header" v-if="$slots.breadcrumb">
      <!--      <a-breadcrumb separator="/">
        <a-breadcrumb-item>
          <router-link to="/portal"> <home-filled style="margin-right: 4px" />主页</router-link>
        </a-breadcrumb-item>
        <slot name="breadcrumb"></slot>
      </a-breadcrumb>-->
    </div>
    <a-layout-content class="a-content-main">
      <div v-if="$slots.search" class="content-search">
        <slot name="search"></slot>
      </div>
      <slot name="main"></slot>
      <div v-if="loading" class="loadmore">
        <a-spin />
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
// import { HomeFilled } from "@ant-design/icons-vue";
export default {
  name: "mainTpl",
  // components: { HomeFilled },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    showBack: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.a-content {
  position: relative;
  height: 100%;
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  .a-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    align-items: center;
    line-height: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .a-content-main {
    margin: 0;
    background-color: #fff;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    min-width: 1000px;
  }
  .content-search {
    background-color: #f8f9fb;
    padding: 4px 0 4px 16px;
  }
}
</style>
